<template>
  <div class="collaborationLedger">
     <PageTitle :goBack="false" title="新增采购价格库" :border="true" />
    <div class="myCardCss" style="width: 100%">
      <div class="searchDiv">
        <div class="buttons">
          <a-button class="reset-btn" @click="addLedger">新增模板</a-button>
<!--          <a-button class="reset-btn" @click="openUpload">批量导入</a-button>-->
        </div>
      </div>
      <a-table
        :dataSource="dataSource"
        :columns="columns"
        :pagination="false"
        :scroll="{ x: 1000, y: 600 }"
        :loading="loading"
      >
        <template #index="{ index }">
          {{ (pageForm.limit - 1) * pageForm.size + index + 1 }}
        </template>
        <template #operation="{ record }">
          <a @click="openDetails(record)" style="color: #1473dc; margin-right: 12px">编辑</a>
          <a @click="openDelBox(record)" style="color: red">删除</a>
        </template>
        <template #enabled="{ record }">
          <a-switch v-model:checked="record.enabled" :checkedValue="true" :unCheckedValue="false" @change="changeStatus(record)" size="small"/>
        </template>
        <template #cjr="{ record }">
          {{record.createUserId ? record.createUserId.name : ''}}
        </template>
      </a-table>
      <a-pagination
        size="small"
        :total="pageForm.total"
        :pageSize="pageForm.size"
        :current="pageForm.limit"
        :hideOnSinglePage="false"
        :showSizeChanger="false"
        @change="changePage"
        style="margin-top: 30px; float: right"
      />
      <div style="clear: both"></div>
    </div>
    <a-modal
      v-model:visible="isShowUpload"
      :maskClosable="false"
      :width="600"
      :centered="true"
      :okText="titleContent"
      title="批量导入"
      @ok="saveUpload"
    >
      <div class="my-upload">
        <a-upload-dragger
          v-model:fileList="fileList"
          name="file"
          :multiple="true"
          action=""
          style="height: 500px"
          :beforeUpload="handleChange"
          :remove="removeFile"
        >
          <div class="ant-upload-hint" v-if="isUploadState === 0">
            <div class="upload-icon">
              <img src="../../../assets/images/upload.png" alt="" />
            </div>
            <div class="upload-click">
              <label style="color: #1473dc">点击选择</label
              ><label>或将文件（xls、xlsx）拖拽至此上传项目表格</label>
            </div>
          </div>
          <div class="ant-upload-hint" v-if="isUploadState === 1">
            <div class="upload-icon">
              <img src="../../../assets/images/success.png" alt="" />
            </div>
            <div class="upload-click" style="color: #303133"> 上传成功 </div>
          </div>
          <div class="ant-upload-hint" v-if="isUploadState === 2">
            <div class="upload-icon">
              <img src="../../../assets/images/error.png" alt="" />
            </div>
            <div class="upload-click" style="color: #303133"> 导入失败 </div>
            <div style="color: #909399">请使用标准导入模板进行数据导入，否则将无法导入成功</div>
          </div>
        </a-upload-dragger>
      </div>
      <div class="tips">
        <div class="tipsItem"
          >· 导入的文件内容必须依照下载模板的要求填写
          <div>
<!--            <div class="downloadBtn">-->
<!--              <img src="../../../assets/images/download.png" alt="" />-->
<!--              <label @click="downloadData">点击下载</label>-->
<!--            </div>-->
          </div>
        </div>
        <div class="tipsItem">· 上传文件最大为2M，仅支持Excel表格文件（xls、xlsx）</div>
        <div class="tipsItem">· 导入重复数据将自动跳过</div>
      </div>
    </a-modal>

    <!-- 新增弹窗 -->
    <a-modal
      v-model:visible="isAdd"
      :maskClosable="false"
      :width="800"
      :centered="true"
      :title="modalTitle"
      @ok="savaAdd"
      @cancel="handleClose"
      style="padding: 20px"
    >
      <div class="steps addSteps">
        <a-steps type="navigation" :style="stepStyle">
          <a-step
            :status="current < 1 ? 'wait' : current === 1 ? 'process' : 'finish'"
            title="生成台账模板"
          />
          <a-step
            :status="current < 2 ? 'wait' : current === 2 ? 'process' : 'finish'"
            title="确认分析字段"
          />
          <a-step
            :status="current < 3 ? 'wait' : current === 3 ? 'process' : 'finish'"
            title="导入成功"
          />
        </a-steps>
      </div>
      <div v-if="current === 1">
        <a-form
          :model="addModelForm"
          :label-col="{ span: 6 }"
          :wrapper-col="12"
          style="margin-top: 16px"
          ref="formRef"
          :rules="rules"
        >
          <a-form-item label="数据类别名称" name="name">
            <a-input
              v-model:value="addModelForm.name"
              placeholder="请输入数据类别名称"
              style="width: 460px"
            />
          </a-form-item>
          <a-form-item label="模板状态">
            <a-switch v-model:checked="addModelForm.enabled" :checkedValue="true" :unCheckedValue="false"/>
          </a-form-item>
          <a-form-item label="备注">
            <a-textarea v-model:value="addModelForm.remark" placeholder="请输入" :rows="4" style="width: 460px" :maxlength="200" :showCount="true"/>
          </a-form-item>
          <a-form-item label="台账模板" name="tplName">
            <a-button v-if="!isUploadState || isUploadState === 2" class="reset-btn" @click="openUpload">上传模板</a-button>
            <div v-if="isUploadState===1">{{ addModelForm.tplName }}<CloseCircleOutlined style="color: red; margin-left: 4px" @click="delFile"/></div>
          </a-form-item>
          <div class="zdContent" v-show="isUploadState === 1" style="padding: 0 20px;">
            <PageTitle :goBack="false" title="字段确认" :border="false" titleTips="（请确认表格中字段是否正确）"/>
            <a-table
              tableLayout="fixed"
              :dataSource="dataSourcebyzd"
              :columns="columnsbyzd"
              :pagination="false"
              :loading="loading"
            >
            </a-table>
            <div style="color: #C11A20;display: flex;margin-top: 18px" v-show="showTips">
              <img src="/src/assets/images/tips.png" alt="" style="width: 15px; height: 15px; margin-right: 4px;margin-top: 3px;">红色字段代表与上一次导入的表格存在不同的情况，确认导入后将使用新模板并且删除原来的表格字段。
            </div>
          </div>
        </a-form>
      </div>
      <div class="label-box" v-if="current === 2">
        <div class="item">
          <label class="label">
            采购单位
            <Tooltip title="单选">
              <InfoCircleOutlined />
            </Tooltip>
          </label>
          <a-radio-group class="radioGroup" v-model:value="addModelValue1">
            <a-radio v-for="(item, index) in arrList" :value="item.code" style="text-align: center">{{item.name}}</a-radio>
          </a-radio-group>
        </div>
        <div class="item">
          <label class="label">
            采购金额
            <Tooltip title="多选">
              <InfoCircleOutlined />
            </Tooltip>
          </label>
          <a-checkbox-group class="radioGroup" v-model:value="addModelValueCheckbox" @change="changeCheckbox($event)">
            <a-checkbox v-for="(item, index) in arrList" :value="item.name" style="text-align: center">{{item.name}}</a-checkbox>
          </a-checkbox-group>
        </div>
        <div class="item">
          <label class="label">
            采购时间
            <Tooltip title="单选">
              <InfoCircleOutlined />
            </Tooltip>
          </label>
          <a-radio-group class="radioGroup" v-model:value="addModelValue3">
            <a-radio v-for="(item, index) in arrList" :value="item.code" style="text-align: center">{{item.name}}</a-radio>
          </a-radio-group>
        </div>
      </div>
      <div v-if="current === 3">
        <div class="success-box">
          <img style="width: 72px;margin: 116px auto 16px;" src="/@/assets/images/success1.png" alt="" />
          <p>模板生成成功</p>
          <a-button type="primary" danger class="search-btn" @click="handleUrl">查看列表</a-button>
        </div>
      </div>
      <template #footer>
        <a-button  @click="handleCancel">{{cancelText}}</a-button>
        <a-button type="primary"  @click="savaAdd">{{sureAdd}}</a-button>
      </template>
    </a-modal>
    <!-- 导入数据弹窗 -->
    <a-modal
      v-model:visible="isUploadDetails"
      :maskClosable="false"
      :width="1500"
      :centered="true"
      okText="完成"
      cancel-text="下载错误数据"
      title="批量导入"
      @ok="closeUploadDetails"
      @cancel="downErrorData"
      style="padding: 20px"
      :footer="false"
    >
      <div class="myTableClass">
        <div class="myHead">
          <div
            class="myCol"
            v-for="(headItem, index) in columnsByUpload"
            :key="index"
            :title="headItem"
          >
            {{ headItem }}
          </div>
        </div>
        <div class="myRow" v-for="(dataItem, index) in uploadData" :key="index">
          <div
            class="myCol"
            :class="!dataItem.valid ? 'active' : ''"
            v-for="(colItem, colIndex) in dataItem.columns"
            :key="colIndex"
            :title="colItem"
            >{{ colItem }}</div
          >
        </div>
      </div>
      <div class="footerBtn">
        <a-button @click="downErrorData" style="margin-right: 12px">下载错误数据</a-button>
        <a-button type="primary" danger @click="closeUploadDetails">完成</a-button>
      </div>
      <div style="clear: both"></div>
    </a-modal>
    <a-modal v-model:visible="isShowDelBox" title="提示" @ok="handleOk">
      <div style="padding: 20px">确定删除此模板吗？</div>
    </a-modal>
  </div>
</template>
<script lang="ts" setup>
import {nextTick, ref} from 'vue';
  import { SearchOutlined,InfoCircleOutlined } from '@ant-design/icons-vue';
  import { message } from 'ant-design-vue';
  import PageTitle from '/@/components/PageTitle/index.vue';
  import { CloseCircleOutlined } from '@ant-design/icons-vue';
import { useRouter, useRoute } from 'vue-router';
import { Tooltip } from 'ant-design-vue';
  import {
    getTable,
    saveTable,
    getTableInfo,
    delTable,
    editStatus,
  } from '/@/api/priceLibrarybyjl';
  import { getAppEnvConfig } from '/@/utils/env';
  import { downloadTemple, downloadErrorData } from '/@/api/fileApi';
  import { checkToken } from '/@/api/checkToken';
  import { getToken } from '/@/utils/auth';
  const formRef = ref();
  let rules = ref({
    name: [{ required: true, message: '请输入数据类别名称', trigger: 'blur' }],
    tplName: [{ required: true, message: '请上传模板', trigger: 'change' }],
  });
  let formData = ref({
    professionalSector: [], // 专业版块
    totalContractAmount: null, // 合同总金额
    winningBidderCompany: null, // 中标单位名称
    biddingCompany: null, // 招标单位名称
    contractName: null, // 合同名称
  });
  let needContractAmountMin = ref(0);
  let needContractAmountMax = ref(0);
  const selectConAmount = (e: any) => {
    if (e) {
      needContractAmountMin.value = e.split('-')[0];
      needContractAmountMax.value = e.split('-')[1];
      getData();
    } else {
      needContractAmountMin.value = 0;
      needContractAmountMax.value = 0;
      getData();
    }
  };
  let dataSource = ref([]);
  let columns = ref([
    {
      title: '序号',
      align: 'left',
      fixed: true,
      width: '70px',
      slots: { customRender: 'index' },
    },
    {
      title: '数据类别名称',
      dataIndex: 'name',
      key: 'name',
      align: 'left',
      width: '100px',
    },
    {
      title: '导入表格名称',
      dataIndex: 'tplName',
      key: 'tplName',
      align: 'left',
      width: '250px',
    },
    {
      title: '字段数',
      dataIndex: 'fieldCount',
      key: 'fieldCount',
      align: 'left',
      width: '80px',
    },
    {
      title: '状态',
      dataIndex: 'enabled',
      key: 'enabled',
      slots: { customRender: 'enabled' },
      align: 'left',
      width: '100px',
    },
    {
      title: '备注',
      dataIndex: 'remark',
      key: 'remark',
      align: 'left',
      width: '200px',
    },
    {
      title: '创建人',
      dataIndex: 'createUserId',
      key: 'createUserId',
      align: 'left',
      width: '100px',
      slots: { customRender: 'cjr' },
    },
    {
      title: '创建时间',
      dataIndex: 'createDate',
      key: 'createDate',
      align: 'left',
      width: '200px',
    },
    {
      title: '操作',
      dataIndex: 'operation',
      key: 'operation',
      width: '160px',
      slots: { customRender: 'operation' },
      align: 'center',
      fixed: 'right',
    },
  ]);
  let dataSourcebyzd = ref([]);
  let columnsbyzd = ref([]);
  let tzInfo = ref({ total: 0, counts: [] });
  let pageForm = ref({
    size: 10,
    limit: 1,
    total: 0,
  });
  function changePage(val) {
    pageForm.value.limit = val;
    // todo
    getData();
  }
  async function changeStatus(row: any) {
    let queryData = {
      id: row.id,
      enabled: row.enabled
    }
    await editStatus(queryData)
    getData()
  }
  let loading = ref(false);
  async function getData() {
    loading.value = true;
    let queryData = {
      type: 'PROCUREMENT',
      limit: pageForm.value.limit,
      size: pageForm.value.size,
    };
    const res = await getTable(queryData);
    if (res && res.list) {
      dataSource.value = res.list;
      pageForm.value.total = res.total;
    } else {
      dataSource.value = [];
      pageForm.value.total = 0;
    }
    loading.value = false;
  }
  getData();
  // 批量上传
  let isShowUpload = ref(false); // 是否打开批量监控弹窗
  function openUpload() {
    isShowUpload.value = true;
  }
  let fileList = ref([]) as any;
  let titleContent = ref('确定导入');
  // 下载纪录
  async function downloadData() {
    let res = await downloadTemple('内部采购导入模板.xlsx');
    let url = window.URL.createObjectURL(res.data);
    let link = document.createElement('a');
    link.style.display = 'none';
    link.download = '内部采购导入模板.xlsx';
    link.href = url;
    document.body.appendChild(link);
    link.click();
  }
  let fileData = null;
  const handleChange = (file: any) => {
    addModelForm.value.tplName = file.name
    fileData = file;
    fileList.value = [file];
    return false;
  };
  const removeFile = () => {
    fileList.value = [];
    fileData = null;
  };
  let isUploadState = ref(0);

  let showTips=ref(false)
  async function saveUpload() {
    if (!fileData) {
      return message.warn('请选择要上传的文件');
    }
    let action = getAppEnvConfig().VITE_GLOB_API_URL + '/table/upload-tpl-file';
    const formData = new FormData();
    formData.append('file', fileData);
    if (addModelForm.value.id) {
      formData.append('tableId', addModelForm.value.id)
    }
    const xhr = new XMLHttpRequest();
    xhr.open('post', action, true);
    xhr.setRequestHeader('Authorization', 'Bearer ' + localStorage.getItem('token'));
    xhr.onload = () => {
      const response = JSON.parse(xhr.response);
      if (response.code === 0) {
        message.success('导入成功');
        isUploadState.value = 1;
        isShowUpload.value = false;
        addModelForm.value.tplFileId = response.data.fileId
        addModelForm.value.fields = response.data.fields
        if (response.data.rows.length) {
          columnsbyzd.value = response.data.rows[0].map((item, index) => {
            return {
              title: item,
              dataIndex: item,
              key: item + index,
              align: 'left',
              width: '200px',
            }
          })
          console.log(addModelForm.value.id,"addModelForm.value.idaddModelForm.value.id")
          if (addModelForm.value.id) {
            nextTick(() => {
              let indexList = [] // 修改过得数组
              response.data.fields.map((item,index) => {
                if (item.diffType) {
                  if (item.diffType === 1) {
                    indexList.push(index)
                  }
                  // for (let i = 0;i<response.data.rows[0].length;i++) {
                  //   // if (item.name === response.data.rows[0][i]) {
                  //   if (item.name === response.data.rows[0][i]) {
                  //     indexList.push(i)
                  //     break
                  //   }
                  // }
                }
              })
              if(indexList.length > 0){
                showTips.value=true
              }
              for (let i = 0;i<indexList.length; i++) {
                nextTick(() => {
                  document.querySelector(`div.zdContent > div.ant-table-wrapper > div > div > div > div > div > table > thead > tr > th:nth-child(${indexList[i]+1})`).style.color = '#C11A20'
                  document.querySelector(`div.zdContent > div.ant-table-wrapper > div > div > div > div > div > table > tbody > tr > td:nth-child(${indexList[i]+1})`).style.color = '#C11A20'
                  // document.querySelector(`div.ant-modal-wrap.ant-modal-centered > div > div.ant-modal-content > div.ant-modal-body > form > div.zdContent > div.ant-table-wrapper > div > div > div > div > div > table > thead > tr > th:nth-child(${indexList[i]+1})`).style.color = '#C11A20'
                  // document.querySelector(`div.ant-modal-wrap.ant-modal-centered > div > div.ant-modal-content > div.ant-modal-body > form > div.zdContent > div.ant-table-wrapper > div > div > div > div > div > table > tbody > tr > td:nth-child(${indexList[i]+1})`).style.color = '#C11A20'
                })
              }
            });
          }
        }
        if (response.data.rows.length > 1) {
          dataSourcebyzd.value = []
          for (let i = 1;i< response.data.rows.length;i++) {
            let item = {}
            for (let j = 0; j < response.data.rows[i].length;j++) {
              item[response.data.rows[0][j]] = response.data.rows[i][j]
            }
            dataSourcebyzd.value.push(item)
          }
        }
        arrList.value=response.data.fields
      }
      if (response.code === 500 || response.code === 400) {
        message.error(response.msg);
        titleContent.value = '重新上传';
        isUploadState.value = 2;
        fileData = null;
        fileList.value = [];
      }
    };
    xhr.onerror = () => {
      console.log('上传失败');
    };
    xhr.ontimeout = function timeout() {
      console.log('上传超时');
    };
    xhr.send(formData);
    fileList.value = [];
    fileData = null;
  }

  let needId = ref('');

  // 新增
  let modalTitle = ref('');
  const isAdd = ref(false);
  let sureAdd = ref('下一步');
  let cancelText = ref('取消');
  const current = ref<number>(1); // 步骤值
  let addModelForm = ref({
    id: '', //id
    type: 'PROCUREMENT',
    name: '',
    enabled: true,
    remark: '',
    tplFileId: '',
    tplName: '',
    fields: []
  });
let addModelValue1 = ref('');
let addModelValue2 = ref([]);
let addModelValueCheckbox = ref([]);
let addModelValue3 = ref('');
  const addLedger = () => {
    isUploadState.value = 0
    current.value = 1
    modalTitle.value = '新增';
    isAdd.value = true;
    sureAdd.value = '下一步'
    addModelForm.value = {
      id: '',
      type: 'PROCUREMENT',
      name: '',
      enabled: true,
      remark: '',
      tplFileId: '',
      tplName: '',
      fields: []
    }
    addModelValue1.value ='';
    addModelValue2.value = [];
    addModelValueCheckbox.value = [];
    addModelValue3.value ='';
  };

  // let arrList=ref(
  //   [
  //     "professional_sector",
  //     "bidding_company",
  //     "contract_name",
  //     "winning_bidder_company",
  //     "contract_amount",
  //     "contract_sign_date",
  //     "construction_investment_proportion",
  //     "comprehensive_monthly_salary",
  //     "chief_monthly_salary",
  //     "deputy_chief_monthly_salary",
  //     "supervising_engineer_monthly_salary",
  //     "supervisor_monthly_salary"
  //   ],
  // )
let arrList=ref([])

  const savaAdd = async () => {
    if(sureAdd.value === '下一步' && current.value === 1){
      if (!addModelForm.value.tplFileId) {
        return message.warning('请上传模板文件')
      }
      if (!addModelForm.value.fields.length) {
        return message.warning('请上传包含正确字段的模板文件')
      }
      current.value = 2
      cancelText.value = '上一步'
      sureAdd.value = '下一步'
    }else if(sureAdd.value === '下一步' && current.value === 2){
      sureAdd.value ='完成';
      cancelText.value = '上一步'
      let queryData = {
        name: addModelForm.value.name,
        remark: addModelForm.value.remark,
        enabled: addModelForm.value.enabled,
        tplFileId: addModelForm.value.tplFileId,
        tplName: addModelForm.value.tplName,
        fields: addModelForm.value.fields,
        type: addModelForm.value.type
      };
      if (addModelForm.value.id) {
        queryData.id = addModelForm.value.id
      }
      queryData.tenderField=addModelValue1.value
      if(addModelValue1.value){
        queryData.tenderField=addModelValue1.value
      }
      if(addModelValueCheckbox.value.length > 0){
        // const value=addModelValue2.value.join()
        // queryData.priceFields=value.split(",")
        let list = arrList.value.filter((item) => {
          if (addModelValueCheckbox.value.indexOf(item.name) > -1) {
            return item;
          }
        });
        let arr=[]
        for(let i in list){
          let a={
            name:list[i].name,
            code:list[i].code,
          }
          arr.push(a)
        }
        queryData.priceFields=JSON.stringify(arr)
      }
      if(addModelValue3.value){
        queryData.contractDateField=addModelValue3.value
      }
      let res = await saveTable(queryData)
      if (res) {
        message.success('保存成功');
        current.value = 3;
        getData();
      }
      // let res = await saveTable(queryData)
      // .then((res) => {
      //   debugger
      //   if (res.code === 0) {
      //     isAdd.value = false;
      //     getData();
      //     message.success('保存成功');
      //   }
      // })
      // .catch((err) => {
      //   message.error('保存失败');
      // });
      // formRef.value.validate().then(async () => {
      //
      // });
    }else {
      current.value = 1;
      isAdd.value = false;
      addModelForm.value = {
        id: '',
        type: 'PROCUREMENT',
        name: '',
        enabled: true,
        remark: '',
        tplFileId: '',
        tplName: '',
        fields: []
      }
      addModelValue1.value ='';
      addModelValue2.value = [];
      addModelValueCheckbox.value = [];
      addModelValue3.value ='';
    }
  };
  function changeCheckbox(val) {
    // let list = arrList.value.filter((item) => {
    //   if (val.indexOf(item.name) > -1) {
    //     const a={
    //       name:item.name,
    //       code:item.code,
    //     }
    //     return a;
    //   }
    // });
    // console.log(JSON.parse(JSON.stringify(list)))
    addModelValueCheckbox.value=val
  }
  const handleCancel = (e) => {
    if(cancelText.value === '上一步' && current.value === 3){
      current.value=2;
      isAdd.value = true;
    }else if(cancelText.value === '上一步' && current.value === 2){
      current.value=1;
      isAdd.value = true;
      cancelText.value='取消'
    }else {
      isAdd.value = false;
      needId.value = '';
      formRef.value.resetFields();
      sureAdd.value ='下一步';
      current.value = 1;
      addModelValue1.value ='';
      addModelValue2.value = [];
      addModelValueCheckbox.value = [];
      addModelValue3.value ='';
    }
  };
  const handleClose = (e) => {
    current.value = 1;
    isAdd.value = false;
    cancelText.value='取消'
    sureAdd.value ='下一步';
    addModelForm.value = {
      id: '',
      type: 'PROCUREMENT',
      name: '',
      enabled: true,
      remark: '',
      tplFileId: '',
      tplName: '',
      fields: []
    }
    addModelValue1.value ='';
    addModelValue2.value = [];
    addModelValueCheckbox.value = [];
    addModelValue3.value ='';
  }
const router = useRouter();
  const handleUrl = () => {
    // sourcingBigData/priceLibrarybyjl
    router.push("/sourcingBigData/priceLibrarybyjl")
  }


  // 编辑
  const openDetails = (row) => {
    modalTitle.value = '编辑';
    current.value = 1
    isAdd.value = true;
    addModelForm.value.id = row.id;
    isUploadState.value = 1
    getTableDetails(row.id);
    nextTick(() => {

    })
  };

  async function getTableDetails(id) {
    let res = await getTableInfo(id)
    addModelForm.value.name = res.name
    addModelForm.value.id = res.id
    addModelForm.value.tplName = res.tplName
    addModelForm.value.tplFileId = res.tplFileId
    addModelForm.value.remark = res.remark
    addModelForm.value.fields = res.fields
    // let arr=[];
    // for(let i=0; i<res.fields.length; i++){
    //   arr.push(res.fields[i].name)
    // }
    arrList.value= res.fields;
    addModelValue1.value=res.tenderField
    addModelValue3.value=res.contractDateField
    if(res.priceFields){
      // addModelValue2.value=res.priceFields.split(",")
      addModelValue2.value=JSON.parse(res.priceFields)

      let priceFields=JSON.parse(res.priceFields)
      let arr=[]
      for(let i=0; i<priceFields.length; i++){
        arr.push(priceFields[i].name)
      }
      addModelValueCheckbox.value=arr
    }

    columnsbyzd.value = res.fields.map(item => {
      return {
        title: item.name,
        dataIndex: item.code,
        key: item.code,
        align: 'left',
        width: '150px',
      }
    })
  }
  // 批量导入数据详情
  let isUploadDetails = ref(false);
  let uploadData = ref([]);
  let columnsByUpload = ref([]);
  let fileId = '';
  let errorNum = 0;
  // 打开窗口
  const openUploadDetails = () => {
    isUploadDetails.value = true;
  };
  // 关闭窗口
  const closeUploadDetails = () => {
    isUploadDetails.value = false;
  };
  // 下载错误数据
  const downErrorData = async () => {
    if (!errorNum) {
      message.warning('无错误数据');
      return;
    }
    let res = await downloadErrorData(fileId);
    let url = window.URL.createObjectURL(res.data);
    let link = document.createElement('a');
    link.style.display = 'none';
    link.download = '内部采购导入错误数据.xlsx';
    link.href = url;
    document.body.appendChild(link);
    link.click();
  };
  let isShowDelBox = ref(false);
  let delId = ref(0);
  const openDelBox = (e: any) => {
    delId.value = e.id;
    isShowDelBox.value = true;
  };
  const handleOk = async () => {
    await delTable(delId.value);
    isShowDelBox.value = false;
    getData();
  };
  function delFile() {
    isUploadState.value = 0
    addModelForm.value.tplFileId = ''
    addModelForm.value.tplName = ''
  }




</script>
<style lang="less" scoped>
  .collaborationLedger {
    .info-div {
      padding: 0 24px;
      position: relative;
      width: 100%;
      height: 98px;
      background: #ffffff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-bottom: 8px;

      .info-left {
        position: absolute;
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
      }

      .info-listData {
        display: flex;
        width: 100%;

        .info-item {
          width: 19%;
          height: 66px;
          border-radius: 4px;
          border: 1px solid #dcdfe6;
          margin-right: 12px;
          display: flex;

          .info-icon {
            margin-right: 12px;
            margin-left: 8px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
          }

          .info-info {
            height: 100%;
            padding: 8px 0;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .name {
              font-size: 14px;
              color: #606266;
            }

            .value {
              font-size: 20px;
              font-weight: 500;
              color: #303133;
            }
          }
        }
      }

      .info-right {
        position: absolute;
        top: 50%;
        right: 16px;
        transform: rotate(180deg) translateY(50%);
      }
    }

    .searchDiv {
      margin-bottom: 16px;
      float: right;
      .exportBtn {
        // float: right;
        border: 1px solid #c11a20;
        width: 26%;
        height: 32px;
        text-align: center;
        line-height: 32px;
        font-size: 14px;
        font-weight: 500;
        color: #c11a20;
        cursor: pointer;
      }
    }
  }

  .my-upload {
    padding: 0 20px;
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;

    .upload-click {
      font-size: 14px;
    }

    img {
      margin: 0 auto;
    }
  }

  .tips {
    margin-top: 12px;
    padding: 0 20px;

    .tipsItem {
      font-size: 12px;
      font-weight: normal;
      line-height: 20px;
      letter-spacing: -0.01px;
      color: #606266;
      display: flex;

      .downloadBtn {
        width: fit-content;
        height: 24px;
        border-radius: 4px;
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 2px 8px;
        box-sizing: border-box;
        border: 1px solid #1473dc;
        margin-left: 8px;
        font-size: 12px;
        line-height: 24px;
        color: #1473dc;

        img {
          margin-right: 5px;
        }
      }
    }
  }

  .exportBtnOfSearch {
    background-color: #c11a20;
    color: #fff !important;
    width: 20% !important;
    height: 32px !important;
  }

  .buttons {
    display: flex;
    justify-content: right;
    width: 30%;
    // float: right;
    margin-left: 20px;
  }

  .search-box {
    display: flex;
    justify-content: left;
    //justify-content: space-between;
    //align-items: center;
  }

  .addSteps{
    padding: 0 80px;
    :deep(.ant-steps) {
      .ant-steps-item{
        flex: none;
        width: 200px;
      }
      .ant-steps-item-container{
        .ant-steps-item-icon{
          width:24px;
          height: 24px;
          line-height: 24px;
          margin-top: 4px;
        }
      }
      .ant-steps-item-process{
        .ant-steps-item-icon{
          width:24px;
          height: 24px;
          background: #ffffff;
          border: 1px solid #C11A20;
          line-height: 24px;
          margin-top: 4px;
          .ant-steps-icon {
            color: #C11A20;

          }
        }
        .ant-steps-item-title{
          color: #C11A20;
        }
      }
      .ant-steps-item:last-child{
        flex: none;
      }

    }
    :deep(.ant-steps-item::before) {
      height: 0;
    }
    :deep(.ant-steps-item::after) {
      top: 57%;
      margin-left: -7px;
    }
  }

  .label-box{
    .item{
      display: flex;
      padding: 16px;
      .label{
        width: 100px;
      }
      .radioGroup{
        width: 630px;
      }
    }
    :deep(.ant-checkbox-wrapper + .ant-checkbox-wrapper){
      margin-right: 8px;
      margin-left: 0;
    }
  }
  .success-box{
    width: 720px;
    height: 360px;
    border-radius: 4px;
    border: 1px solid #DCDFE6;
    margin: 24px 20px;
    text-align: center;
  }

  :deep(.ant-select-multiple .ant-select-selector:after) {
    content: '' !important;
  }

  :deep(.ant-pagination .ant-pagination-item-active a) {
    // .ant-pagination-item {
    color: #c11a20 !important;
  }

  :deep(.ant-pagination .ant-pagination-item a) {
    color: #606266;
  }

  :deep(.ant-pagination .ant-pagination-item) {
    background-color: transparent !important;
    border: none !important;
  }

  :deep(.ant-pagination-prev) {
    border: none !important;
  }

  :deep(.ant-pagination-next) {
    border: none !important;
  }
  .myTableClass {
    padding: 10px;
    width: 100%;
    max-height: 750px;
    overflow: auto;
    box-sizing: border-box;
    .myHead {
      display: flex;
      background: #f5f7fa;
    }
    .myRow {
      display: flex;
      border-top: 1px solid #ebeef5;
      width: fit-content;
    }
    .myRow:last-child {
      border-bottom: 1px solid #ebeef5;
      width: fit-content;
    }
    .myCol {
      width: 130px;
      text-align: left;
      padding: 10px 8px;
      color: #303133;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .myCol.active {
      color: #c11a20;
    }
  }
  .footerBtn {
    float: right;
    margin: 10px 20px 20px;
  }
  .reset-btn {
    border-radius: 4px;
    &:hover {
      color: #c11a20;
      border-color: #c11a20;
    }
  }
</style>
